<script>
/* eslint-disable vue/require-default-prop */
import { Button } from "element-ui";
export default {
  name: "ContextMenu",
  props: {
    position: { type: Object, default: () => ({ top: 0, left: 0 }) },
    title: String,
    menu: {
      type: Array,
      default: () => [],
    },
    afterClick: Function,
  },
  data() {
    return {
      innerPosition: {
        top: 0,
        left: 0,
      },
    };
  },
  async mounted() {
    await this.$nextTick();
    const { position } = this; // this
    const { vw, vh } = this; // this plugin
    const a = document.querySelector(".context_menu");
    if (a) {
      const { clientWidth, clientHeight } = a;
      this.innerPosition.left =
        position.left + clientWidth > vw ? vw - clientWidth : position.left;
      this.innerPosition.top =
        position.top + clientHeight > vh ? vh - clientHeight : position.top;
    }
  },
  methods: {
    menuClick(callback) {
      this.afterClick();
      callback();
    },
  },
  render(h) {
    const { innerPosition, title, menu, menuClick } = this;
    return (
      <div
        class="context_menu"
        style={{
          top: innerPosition.top + "px",
          left: innerPosition.left + "px",
        }}
      >
        <div class="_title">{title}</div>
        {menu.map((i) => (
          <div style="padding: 0 8px">
            <Button
              disabled={i.disabled === void 0 ? false : i.disabled}
              type="text"
              onClick={() => menuClick(i.handler)}
            >
              {i.label}
            </Button>
          </div>
        ))}
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
.context_menu {
  position: fixed;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 0 5px #00000040;
  padding: 8px 0;
  max-height: 30vh;
  overflow-y: auto;
  ._title {
    padding: 0 8px;
    margin-bottom: 8px;
    color: #999999;
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
::v-deep {
  .el-button--text {
    padding: 8px 24px;
  }
  .el-button {
    font-weight: normal;
    padding: 4px 0;
  }
}
</style>
